<template>
    <div class="store-data">
            <div id="store-GenderRatio"></div>
            <div id="store-AgeDistribution"></div>
        </div>
</template>

<script setup>
import { onMounted,ref,computed,watch } from 'vue';
import { AllUsers ,usersAgeNumber} from '@/api/storeRevenue'
import * as echarts from 'echarts';
import { nextTick } from 'process';
// 用户信息
const allUserInfo = ref([])
// 用户中男生的值
let userMan = ref(0)
// 用户中女生的值
let userWoman = ref(0)
// 用户中10-20岁的范围
let userfromTentoTwenty = ref(0)
// 用户中21-30岁的范围
let userfromTwentytoThirty = ref(0)
// 用户中31-40岁的范围
let userfromThirtytoForty = ref(0)
// 用户中41-50岁的范围
let userfromFortytoFifty = ref(0)
// 用户中51-70岁的范围
let userfromFiftytoSeventy = ref(0)
// 用户中71-90岁的范围
let userfromSeventytoNinety = ref(0)
const GenderRatio = () =>{
    let echartGenderRatio = echarts.init(document.getElementById("store-GenderRatio"))
    // 4.2 定义配置项
    let option = {
        // 图表的标题
        title:{
            text:"商城会员男女比例"
        },
        // 图表的提示
        tooltip:{},
        // 图例
        legend:{data:["男","女"]},
        // 设置数据
        series:[
            {
                //类型
                type:"pie",
                radius:[160,100],
                data:[
                    {name:"女",value:userWoman.value,
                    itemStyle:{color:"#FDE6E0"},
                    label:{
							show:true,
							position:"center",
							// {d}百分比 {big|内容} 使用样式
							formatter:"{big|{d}}{small|%}\n{b}",
							// 定义样式（富文本）
							rich:{
								big:{
									color:"#f70",
									fontSize:"48px",
									fontWeight:900,
								},
								small:{
									color:"#f70"
								}
							}
						}},
                        {name:"男",value:userMan.value,
						// 样式灰色
						itemStyle:{color:"#DCE2F1"},
						// 标签不显示
						label:{show:false},
						// 提示不显示
						tooltip:{show:true}}
                ]
            }
        ]
    }
    // 4.3 更新配置
    echartGenderRatio.setOption(option);
    // 大小随页面变化而变化
    window.addEventListener('resize', function() {
        echartGenderRatio.resize();
        });
}
const AgeDistribution = () =>{
    // 定义渐变
	var linear = {
	  type: 'linear',
	  x: 0,
	  y: 0,
	  x2: 0,
	  y2:1,
	  colorStops: [{
		  offset: 0, color: '#ffc773' // 0% 处的颜色
	  }, {
		  offset: 1, color: '#ffa400' // 100% 处的颜色
	  }],
	  global: false // 缺省为 false
    }
    let echartAgeDistribution = echarts.init(document.getElementById("store-AgeDistribution"))
    let option = {
			// 图表的标题
			title:{
				text:"商城会员年龄段分布"
			},
			// 图表的提示
			tooltip:{},
			// 图例
			legend:{data:["年龄段分布"]},
			// x轴线
			xAxis:{data:["10-19岁","20-29岁","30-39岁","40-49岁","50-69岁","70-89岁"]},
			// y轴线
			yAxis:{},
			// 设置数据
			series:[
				{
					// 数据名称
					name:"年龄段分布",
					// 类型为柱状图
					type:"bar",
                    itemStyle:{color:linear,
                    borderRadius:[30,30,0,0],
                    opacity: 0.7
                },
					// 数据data
					data:[
                        userfromTentoTwenty.value,
                        userfromTwentytoThirty.value,
                        userfromThirtytoForty.value,
                        userfromFortytoFifty.value,
                        userfromFiftytoSeventy.value,
                        userfromSeventytoNinety.value
                    ]
					}
			]
		}
        // 4.3 更新配置
        echartAgeDistribution.setOption(option);
        // 大小随页面变化而变化
        window.addEventListener('resize', function() {
            echartAgeDistribution.resize();
        });
}
// 监听用户的值
watch(
    ()=>allUserInfo.value,
    ()=>{
        allUserInfo.value.forEach(item =>{
            if(item.sex == 'man'){
                userMan.value ++
            }else{
                userWoman.value++
            }
        })
    },
    {immediate:true}
    )
// 男女比例的图标
onMounted(async()=>{
    // 获取用户信息
    allUserInfo.value = await AllUsers()
    userfromTentoTwenty.value = await usersAgeNumber({startAge:10,endAge:20})
    userfromTwentytoThirty.value = await usersAgeNumber({startAge:20,endAge:30})
    userfromThirtytoForty.value = await usersAgeNumber({startAge:30,endAge:40})
    userfromFortytoFifty.value = await usersAgeNumber({startAge:40,endAge:50})
    userfromFiftytoSeventy.value = await usersAgeNumber({startAge:50,endAge:70})
    userfromSeventytoNinety.value = await usersAgeNumber({startAge:70,endAge:90})
    nextTick(()=>{
        GenderRatio()
        AgeDistribution()
    })
})
</script>

<style lang="scss" scoped>
.store-data{
        display: flex;
        padding: 20px;
        border-radius: 10px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
        margin-top: 20px;
        width: 100%;
        height: 400px;
        #store-GenderRatio{
            width: 45%;
            height: 100%;
            background-color: #ffff;
        }
        #store-AgeDistribution{
            margin-left: 5%;
            width: 45%;
            height: 100%;
            background-color: #ffff;
        }
    }
</style>